<template>
  <div class="app-container">
    <!-- 行业线业务对话框 -->
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="申请项目名称" prop="projectName">
        <el-input v-model="form.projectName" placeholder="请输入申请项目名称"/>
      </el-form-item>
      <el-form-item label="专业" prop="specialtyId">
        <treeselect v-model="form.specialtyId"
          :options="specialtyOptions"
          :normalizer="normalizer"
          :show-count="true"
          placeholder="选择专业"
        ></treeselect>
      </el-form-item>

      <el-row>
        <el-col :span="12">
          <el-form-item label="复核期(年)" prop="reviewPeriod">
            <el-input-number v-model="form.reviewPeriod"
              controls-position="right" :min="0" placeholder="请输入复核期,单位:年"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="清册标识" prop="bookTag">
            <el-select v-model="form.bookTag"  placeholder="清册标识" :disabled="disabled" clearable size="small">
              <el-option v-for="dict in bookTagOptions"
                         :key="dict.code"
                         :label="dict.name"
                         :value="dict.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="类别" prop="projectCategory">
            <el-radio-group v-model="form.projectCategory">
              <el-radio v-for="dict in categoryStatusOptions" :label="dict.code" :key="dict.code">
                {{dict.name}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="准考证" prop="admissionTicket">
            <el-radio-group v-model="form.admissionTicket">
              <el-radio v-for="dict in admissionTicketOptions" :label="dict.code" :key="dict.code">
                {{dict.name}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="适用员工" prop="applyStaff">
        <el-checkbox-group v-model="applyStaff">
          <el-checkbox v-for="applyStaff in industryApplyStaffOptions" :label="applyStaff" :key="applyStaff">
            {{applyStaff}}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="申报要求">
        <el-form-item prop="fileSpecification">
          <el-input v-model="form.fileSpecification" type="textarea" placeholder="请输入文件要求内容"/>
        </el-form-item>
        <el-form-item prop="otherReasons" style="margin-top: 5px">
          <el-input v-model="form.otherReasons" type="textarea" placeholder="请输入其他要求内容"/>
        </el-form-item>
      </el-form-item>

      <el-row>
        <el-col :span="12">
          <el-form-item label="培训大纲" prop="outline">
            <el-radio-group v-model="form.outline">
              <el-radio v-for="dict in outlineStatusOptions"  :label="dict.code" :key="dict.code">
                {{dict.name}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="培训教材" prop="textbook">
            <el-radio-group v-model="form.textbook">
              <el-radio v-for="dict in textbookStatusOptions"  :label="dict.code" :key="dict.code">
                {{dict.name}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="从业年限" prop="ageLimit">
        <el-radio-group v-model="form.ageLimit">
          <el-radio v-for="dict in ageStatusOptions"  :label="dict.code" :key="dict.code">
            {{dict.name}}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="理论合格分数" prop="theoryQualified">
            <el-input-number v-model="form.theoryQualified"
              controls-position="right" :min="0" :max="150" placeholder="请输入理论合格分数"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实操合格分数"  prop="practicalQualified">
            <el-input-number v-model="form.practicalQualified"
              controls-position="right"  :min="0" :max="150" placeholder="请输入实操合格分数"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="理论总分数"  prop="theoryTotal">
            <el-input-number v-model="form.theoryTotal"
              controls-position="right" :min="0" :max="150" placeholder="请输入理论总分数"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="考试时长" prop="theoryDuration">
            <el-input-number v-model="form.theoryDuration"
              controls-position="right" :min="0" :max="180" placeholder="请输入考试时长(分钟)"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="补考间隔" prop="makeUpInterval">
            <el-input-number v-model="form.makeUpInterval"
              controls-position="right" :min="0" :max="90" placeholder="请输入补考间隔(天)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="补考次数" prop="makeUpNumber">
            <el-input-number v-model="form.makeUpNumber"
              controls-position="right" :min="0" :max="5" placeholder="请输入补考次数"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item prop="projectClassify" label="行业线立项标识" style="margin-top: 5px" hidden>
        <el-input
          v-model="form.projectClassify=1"
        />
      </el-form-item>
    </el-form>
    <div class="dialog-footer" style="float:right" v-if="currFromControl">
      <el-button :loading="buttonLoading" type="info" @click="submitForm">暂存</el-button>
      <el-button :loading="buttonLoading" type="primary" @click="submitForm('apply')">提交</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
    <!-- 审批历史 -->
    <el-tab-pane label="审批历史" v-if="processInstanceId">
      <history ref="historyRef" :processInstanceId="processInstanceId"></history>
    </el-tab-pane>
    <el-tab-pane label="流程状态" v-if="processInstanceId">
      <diagram ref="diagramRef" :processInstanceId="processInstanceId"></diagram>
    </el-tab-pane>
    <!-- 提交 -->
    <verify ref="verifyRef" @callSubmit="callSubmit" :taskId="taskId" :taskVariables="taskVariables"
            :sendMessage="sendMessage"></verify>
  </div>
</template>

<script>
  import {getProjectByProjectId,getProjectByProjectCode, updateProject} from "@/api/question/projectInfo";
  import verify from "@/views/workflow/components/Verify";
  import {listSpecialty} from "@/api/question/specialtyTree";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  const industryApplyStaffOptions = ['工艺员', '工艺师', '培训员', '宣传干事'];
  export default {
    name: "industryForm",
    props: {
      businessKey: String, // 业务唯一标识
      parentTaskId: String, // 父级任务id
      taskId: String, // 任务id
      currFromControl: Boolean  //控制器
    },
    components: {
      verify,
      Treeselect
    },
    data() {
      return {
        // 流程实例
        processInstanceId: '',
        // 按钮loading
        buttonLoading: false,
        //行业线适用员工
        industryApplyStaffOptions: industryApplyStaffOptions,
        applyStaff: [],
        // 培训大纲数据字典
        outlineStatusOptions: [],
        // 培训教材数据字典
        textbookStatusOptions: [],
        // 行业线立项类别数据字典
        categoryStatusOptions: [],
        // 准考证类型数据字典
        admissionTicketOptions: [],
        // 从业年限数据字典
        ageStatusOptions: [],
        //行业线立项专业树选项
        specialtyOptions: [],
        // 清册标识数据字典
        bookTagOptions: [],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          projectName: [
            {required: true, message: "项目名称不能为空", trigger: "blur"}
          ],
          reviewPeriod: [
            {required: true, message: "复核期,单位:年,不能为空", trigger: "blur"}
          ],
          specialtyId: [
            {required: true, message: "请选择专业", trigger: "blur"}
          ],
          bookTag: [
            {required: true, message: "请选择清册标识", trigger: "blur"}
          ],
          admissionTicket: [
            {required: true, message: "请选择准考证类型", trigger: "blur"}
          ],
          projectCategory:[
            {required: true, message: "请选择类别！", trigger: "blur"}
          ],
          outline: [
            {required: true, message: "请选择培训大纲", trigger: "change"}
          ],
          textbook: [
            {required: true, message: "请选择培训教材", trigger: "blur"}
          ],
          theoryQualified: [
            {required: true, message: "请输入理论合格分数", trigger: "blur"}
          ],
          theoryTotal: [
            {required: true, message: "请输入理论总分数", trigger: "blur"}
          ],
          theoryDuration: [
            {required: true, message: "请输入理论考试时长", trigger: "blur"}
          ],
          ageLimit: [
            {required: true, message: "请选择从业年限", trigger: "blur"}
          ],
        },
        taskVariables: {}, //流程变量
        //消息提醒
        sendMessage: {}
      };
    },
    watch: {
      businessKey: {
        immediate: true, // 很重要！！！
        handler(newVal) {
          if (newVal) {
            this.getById()  // 根据父页面传递参数
          }
        }
      }
    },
    created() {
      //查询培训大纲字典状态
      this.getDicts("question_project_outline").then(response => {
        this.outlineStatusOptions = response.responseBody.result;
      });
      //查询培训教材字典状态
      this.getDicts("question_project_textbook").then(response => {
        this.textbookStatusOptions = response.responseBody.result;
      });
      //查询行业线立项类别状态
      this.getDicts("question_project_category").then(response => {
        this.categoryStatusOptions = response.responseBody.result;
      });
      //查询准考证类型数据状态
      this.getDicts("question_project_admission").then(response => {
        this.admissionTicketOptions = response.responseBody.result;
      });
      //查询从业年限字典状态
      this.getDicts("question_project_age").then(response => {
        this.ageStatusOptions = response.responseBody.result;
      });
      //查询清册标识数据状态
      this.getDicts("exam_book_tag").then(response => {
        this.bookTagOptions = response.responseBody.result;
      });
      this.getTreeSelect();
    },
    methods: {
      /** 转换菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.specialtyId,
          label: node.specialtyName,
          children: node.children
        };
      },
      //查询专业树结构
      getTreeSelect(){
        listSpecialty().then(response => {
          const specialty = {specialtyId: 0,specialtyName: "主类目", children: []};
          specialty.children = this.handleTree(response.rows,"specialtyId");
          this.specialtyOptions.push(specialty);
        })
      },
      // 取消按钮
      cancel() {
        this.$emit("closeForm")
      },
      callSubmit() {
        this.$emit("closeForm")
      },
      async getById() {
        const {data} = await getProjectByProjectId(this.businessKey)
        this.form = data;
        this.applyUnit = this.form.applyUnit !== null ? this.form.applyUnit.split(',') : null;
        this.applyStaff = this.form.applyStaff !== null ? this.form.applyStaff.split(',') : null;
        this.form.assessType = this.form.assessType == "0" ? true : false;
      },
      /** 提交按钮 */
      submitForm(flag) {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.assessType = this.form.assessType == true ? 0 : 1;
            this.buttonLoading = true;
            if (this.form.projectId != null) {
              updateProject(this.form).then(response => {
                if (flag === 'apply') {
                  this.submitFormApply(response.data)
                } else {
                  this.msgSuccess("修改成功");
                }
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        });
      },
      //提交流程
      submitFormApply(_data) {
        getProjectByProjectId(_data.projectId).then(response => {
          this.taskVariables = {
            entity: _data,
            userId: 1
          };
          this.sendMessage = {
            title: '立项申报',
            messageContent: '单据【' + _data.projectId + "】申请"
          }
        });
        this.$refs.verifyRef.visible = true
      }
    }
  };
</script>
